<template>
  <div
    style="margin: 18px auto 0 auto; width: 1360px; padding-bottom: 10px"
    v-loading="loading"
  >
    <div>
      <div v-if="studyingList.length > 0" class="title">学习中课程</div>
      <courseList
        v-if="studyingList.length > 0"
        :list="studyingList"
      ></courseList>
      <div class="title">待学习课程</div>
      <!-- 待报名列表 -->
      <tobeLearningList
        v-if="tobeStudyList.length > 0"
        type="select"
        :list="tobeStudyList"
        height="auto"
        @refresh="tobeLearningListReturn"
      ></tobeLearningList>
      <el-empty v-else description="暂无课程~"></el-empty>
    </div>
  </div>
</template>

<script>
import { learningCourseList, selectCourseList } from '@/api/home'
import tobeLearningList from '@/views/home/components/tobeLearningList.vue'
import courseList from './components/courseList.vue'

export default {
  components: { courseList, tobeLearningList },
  props: {},
  data() {
    return {
      // activeName: 0,
      // 学习中课程
      studyingList: [],
      // 待学习列表
      alltobeStudyList: [],
      learningCourse: [],
      tobeStudyList: [],
      loading: false
    }
  },
  // watch: {
  //   activeName:{
  //     handler(val){
  //       this.selectCourseList()
  //     }
  //   }
  // },
  methods: {
    /* 获取课程列表 */
    async learningCourseList() {
      this.loading = true
      let res = await learningCourseList(this.$store.getters.studentId)
      this.learningCourse = res.data
      this.studyingList = res.data.filter((item) => {
        return item.studyStatus == 1
      })
      this.loading = false
    },
    async selectCourseList() {
      let res = await selectCourseList(this.$store.getters.studentId)

      this.tobeStudyList = [
        ...this.learningCourse.filter((item) => {
          return item.studyStatus == 0
        }),
        ...res.data
      ]
    },
    tobeLearningListReturn() {
      this.getList()
    }
  },
  created() {
  },
  async mounted() {
    await this.learningCourseList()
    this.selectCourseList()
  }
}
</script>
<style scoped lang="scss">
.nodatabox {
  border-radius: 10px;
  background: white;
  padding-top: 15vh;
  height: calc(100vh - 68px - 18px - 70px);
  box-sizing: border-box;
}

.title {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  padding-bottom: 20px;
  box-sizing: border-box;
  font-size: 20px;
  font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
  font-weight: 600;
  color: #333333;
}
</style>
